Form properties
Description
Opens the Form View Builder.
- Name
- Description
- Data Source
The Data Source pane is where the data source for the form view control is defined. Generally, using a list control as the data source is the simplest approach. Javascript functions, Static JSON, and Custom data can also be used as a data source.
- Fields
The Fields tab in the Form View Builder is used to configure properties for the fields in the Data Source. This is where you define editors, display formats, and other settings for fields in the FormView control.
- Form Layout
The Form Layout tab is where the layout of the FormView control is designed. The following properties are used to configure controls, maps, images, containers, and other items added to the Form Layout.
- Form Properties
FormView Control properties available on the Form View Builder Form Properties tab.
- Multiple Layouts
Multiple Layouts give users the option to view a Form View control in different ways. What the Form View' CSS looks like, what items appear on it, and how the control is structured can be easily altered when more than one layout has been defined. Checking the 'Has multiple layouts' property in the Form Properties section of the Form Properties pane will open the Multiple Layouts pane. New Form View layouts are created on this pane and then defined in the Form Layout pane as usual.
- CSS
Here
- Items
The idea of 'Items' is based off of the viewbox control. Items are arbitrary html inside of something that helps delegates events. Items are used in order to create 'targets' or 'hot' areas in an application; i.e. things to click on, or that can generate other events. This feature can help developers get around making extensive use of editors in order to delegate events. For example, by creating a named item labeled 'save', that saves a form by delegating an event and then firing off some javascript, you can eliminate the need for making extensive use of editors with the Form View control. Items support a lot more than onClick events and can even support multiple events on the same target area. You can create items that when tapped will load an editor for a given field, that when swiped one way it will go true, and that when swiped the other way will go false.
- Preview
Here
- Javascript
Here
For more information on how to create component with a Form View see the FormView guides section of the documentation.
A FormView control provides a very efficient way to create editable forms, both large and small. Visually, these forms can be almost anything that can be expressed in HTML. The displayed fields in the form can be made hot so that, when tapped, they bring up the appropriate editor editing the field value, or to do 'editing in place' (such as when acting like a switch). The editors that the forms use are shared - many fields on the form can use the same editor.
The editors used in a FormView control are contained in editor-sets. An editor-set can contain multiple editors. When the user taps on a field, the associated editor for that field is invoked, and the editor-set that contains the selected editor is brought into view. For example, in a mobile phone application (where the screen size is quite small), the editor-set might be in its own Panel Card that animates into view, allowing the field value to be edited. When the edit is completed, the editor-set is closed and the Panel Card that contains the editor-set is animated out of view.
The data source for a FormView control can be a List control, or arbitrary JSON data. In fact, a typical use item for a FormView control, is to construct the DetailView for a List control.
Some advantages of a FormView over creating an equivalent display using individual controls, such as buttons, labels, and textboxes, include:
- The FormView HTML and usage of the DOM are usually much lighter weight than standard controls, resulting in faster performance and less run-time memory usage.
- The FormView Builder can configure much of the form automatically, or with simple operations that apply to multiple fields at once.
- It automatically provides lists of fields deduced from the data definitions to help guide you through construction.
- The use of shared editors can simplify and improve the User Interface and its construction.
- User Interface features, such as Next/Previous field navigation, are easily implemented.
- HTML Templating simplifies using HTML code provided by visual designers for both the entire form, or on a field-by-field basis.
The FormView Builder provides flexible functionality for configuring the control with little or no coding. It has separate tabs with dialog boxes for:
- Specifying the most commonly needed properties of fields including specifying which editor-set and editor each field should use.
- Creating custom actions when a field is tapped, swiped, etc.
- Specifying the HTML template to display the form and its fields, with many built-in options for grouping, handing multiple values, and formatting.